<template>
  <div class="app-container">
    <figure class="oprationWrap">
      <figcaption>
        <div></div>
        <div>同步轮1</div>
        <div>同步轮2</div>
      </figcaption>
      <figcaption>
        <div>轮中心距</div>
        <div>
          <el-input v-model="oprationForm.wheelCenterDistance" placeholder="请输入轮中心距"/>
        </div>
      </figcaption>
      <figcaption>
        <div>齿形</div>
        <div>
          <el-input v-model="oprationForm.tooth" placeholder="请输入齿形"/>
        </div>
      </figcaption>
      <figcaption>
        <div>齿数</div>
        <div>
          <el-input v-model="oprationForm.timingPulleyTeethOne" placeholder="请输入齿数1"/>
        </div>
        <div>
          <el-input v-model="oprationForm.timingPulleyTeethTwo" placeholder="请输入齿数2"/>
        </div>
      </figcaption>
      <figcaption>
        <div>P.D.</div>
        <div>{{ oprationForm.PD1 }}</div>
        <div>{{ oprationForm.PD2 }}</div>
      </figcaption>
      <figcaption>
        <div>注意</div>
        <div>{{ oprationForm.attentionInfo }}</div>
      </figcaption>
      <figcaption>
        <div>皮带长度</div>
        <div>{{ oprationForm.beltLength }}</div>
      </figcaption>
    </figure>


    <div class="oprationWraps">
      <el-button type="primary" icon="el-icon-check" size="normal" @click="saveDatas">提交</el-button>
    </div>

  </div>
</template>


<script>

import {
  getBeltCalculation, GetTransFormSkuNumByValue
} from "@/api/hualian/type";

export default {
  name: "Screw",
  data() {
    return {
      oprationForm: {
        wheelCenterDistance: '',//轮中心距
        tooth: '',//齿形
        timingPulleyTeethOne: '',//齿数1
        timingPulleyTeethTwo: '',//齿数2
        PD1: '',
        PD2: '',
        attentionInfo: '', //注意
        beltLength: '',//皮带长度
      }
    };
  },
  created() {

  },
  methods: {
    saveDatas() {
      let _this = this;

      const {wheelCenterDistance, tooth, timingPulleyTeethOne, timingPulleyTeethTwo} = _this.oprationForm;
      const postData = {
        wheelCenterDistance,
        tooth, timingPulleyTeethOne, timingPulleyTeethTwo
      }

      const dataValue = Object.values(postData);

      if (dataValue.includes('')) {
        _this.$modal.msgError("表单校验未通过，请重新检查提交内容");
        return;
      }
      console.log('postData', postData)
      getBeltCalculation(postData).then(response => {
        console.log('------转换后的型号' + response.data);
      });
    }
  }
}
;
</script>
<style rel="stylesheet/scss" lang="scss">

.oprationWrap {
  width: 90%;
  margin: 30px auto;
  box-sizing: border-box;

  figcaption {
    display: flex;
    justify-content: space-between;

    > div {
      border: 1px solid black;
      //padding: 15px 0;
      text-align: center;
      height: 55px;
      display: flex;
      justify-content: center;
      align-items: center;

      &:first-of-type {
        width: 30%;
        color: #1e1e1e;
        font-weight: 500;
        background: #f3f3f3;
      }

      &:nth-of-type(2) {
        width: 70%;
      }

      .el-input {
        width: 100%;

        input {
          height: 53px;
          border: none;
          box-sizing: border-box;
          text-align: center;
          font-size: 18px;
          font-weight: 500;
        }
      }
    }

    &:nth-of-type(6) {
      div {
        color: red;
      }
    }

    &:nth-of-type(1), &:nth-of-type(4), &:nth-of-type(5) {
      > div {
        &:nth-of-type(2), &:nth-of-type(3) {
          width: 35%;
        }
      }
    }

  }
}

.oprationWraps {
  width: 90%;
  margin: 20px auto;
  display: flex;
  justify-content: flex-end;
  button{
    min-width: 220px;
  }
}
</style>
